<template>
  <div class="loginBox">
    <!-- 登录框 -->
    <div class="register">
      <h4>系统登录</h4>
      <!-- 登录的表单 -->
      <!-- 通过v-bind:绑定model这个属性 -->
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        size="mini"
        ><!--绑定model这个属性z在这里实行双向数据绑定 使用是在prop里面使用-->
        <el-form-item prop="uname">
          <el-input
            type="text"
            v-model="loginForm.uname"
            prefix-icon="iconfont icon-yonghu"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            :type="flag ? 'password' : 'text'"
            v-model="loginForm.pass"
            prefix-icon="iconfont icon-mima"
            autocomplete="off"
            @keyup.native.13="submitForm('ruleForm')"
          >
            <!--v-on:keyup.native.13按回车触发等于是按了那个提交按钮,事件后面加上.能直接使用 -->
            <i
              @click="flag = !flag"
              slot="suffix"
              class="iconfont"
              :class="flag ? 'icon-eyes' : 'icon-eyes-'"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            :loading="login"
            >提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { login } from '../../api/user.js'

import local from '../../utils/local'

// 引入验证登录和刷新的方式
import { verify } from '../../router/index'
export default {
  data() {
    /* 非空效验的函数表达式 */
    var validateUname = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入名字'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      flag: true,
      login: false,
      /* 1表单的数据对象 */
      loginForm: {
        uname: '',
        pass: ''
      },
      /* 2表单的规则对象 规则对象的属性必须和数据对象的属性保持一致 */
      rules: {
        uname: [{ validator: validateUname, trigger: 'blur' }],
        pass: [{ validator: validatePass, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm(formName) {
      if (this.login) return
      /* 进来后让圆圈开始转 */
      this.login = true
      this.$refs[formName].validate(async valid => {
        if (valid) {
          //  验证通过就能发请求
          /* alert('submit!') */
          /*  const data=await login({
            account:this.loginForm.uname,
            password:this.loginForm.pass
          })
       console.log(data) */
          const data = await login({
            account: this.loginForm.uname,
            password: this.loginForm.pass
          })
          /*  console.log(data) */
          // 根据code和msg使用element-ui提供的$message方法提示 role代表管理员权限,用来判断路由抽离
          const { code, msg, token, role } = data
          if (code === 0) {
            this.$message({
              type: 'success',
              message: msg
            })
            /* 将token储存进来,因为只有有这个token值,才能确认是否登录 */
            local.set('token', token)
            /* 将role储存进来,因为只有有这个role值,才能判断用户权限 */
            local.set('role', role)
            // 登录成功就通过了验证
            verify()
            /* 跳转到首页 */
            setTimeout(() => {
              this.$router.push('/')
            }, 1000)
          } else {
            this.$message.error({
              type: 'error',
              message: msg,
              duration: 1500
            })
            setTimeout(() => {
              this.login = false
            }, 1600)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
/* 70validator效验器 trigger触发方式 */
</script>

<style lang="less" scoped>
.loginBox {
  height: 100%;
  background-color: gray;
  display: flex;
  justify-content: center;
  align-items: center;
  .register {
    /* width: 370px;
    height: 230px; */
    background-color: #ccc;
    h4 {
      color: white;
      text-align: center;
      font-weight: 600;
      letter-spacing: 22px;
    }
    .el-button {
      width: 100%;
    }
  }
}
</style>
